<template>
	<view >
		<view v-if="phone">
			<view style=''>
			  <view style=' display: flex; justify-content: center;'>
			    <u--image shape='circle' :showLoading="true" :src="storeLogo" width="80px" height="80px" style="position: fixed; top: 0px;object-fit: cover; margin: auto;margin-top:20px"></u--image>
			  </view>
			</view>
			<!-- <img :src='backgroundImage' width='100%' /> -->
			<view class='div1'>
				<view style='color:#909199;font-size:14px;padding-top:5px'>正在给用户:
				<text style='color:#2979ff'>[{{phone}}]</text>
				转账
				</view>
				<view style='color:#909199;font-size:14px;padding-top:5px'>当前转账一经操作，将不能撤回，请转账前确认目标账户是否正确！</view>
			</view>
		</view>
		<view style='padding:20px;background-color: #fff;border-radius: 10px 10px 0px 0px;'>
			<view style='color:#fcbd71;padding:10px 0px;'>转账金额</view>
			<view>
				<u-row>
					<u-col span='1'>
						<view>
							<text style='font-size:28px'>￥</text>
						</view>
					</u-col>
					<u-col span='11'>
						<view>
							<view v-if='amount != ""' style='font-size:25px;color:#303133'>
								{{amount}}
							</view>
							<view v-else style='text-align: right;color:#909399;font-size:23px'>
								请输入转账金额
							</view>
						</view>
						
					</u-col>
				</u-row>
				<u-line></u-line>
				<view style='padding-top:10px;color:#909399;font-size:14px;'>
					<text>当前可转账最大金额</text>
					<text @click='amount = balance' style='color:#2979ff;font-weight: bold;font-size:16px;padding-left:10px'>[{{balance}}]</text>
				</view>
			</view>
		</view>
		<view style='position: fixed;bottom:0px;width:100%;'>
			<view style='color:#909399;font-size:12px;text-align: center;padding:5px'>由江门市夜管家科技有限公司提供服务</view>
			<line clole='#606266'></line>
			<view style='background-color: #f3f3f3;'>
				<view style='padding:5px'>
					<u-row>
						<u-col span='9'>
							<u-row >
								<u-col span='4'>
									<view class='btn' @click='add(1)'>1</view>
								</u-col>
								<u-col span='4'>
									<view class='btn' @click='add(2)'>2</view>
								</u-col>
								<u-col span='4'>
									<view class='btn' @click='add(3)'>3</view>
								</u-col>
							</u-row>
						</u-col>
						<u-col span='3'>
							<u-row >
								<u-col span='12'>
									<view class='btn' @click='pev' style='display: flex;justify-content: center;align-items: center;'>
										<u-icon name="arrow-leftward" style='padding:5px;'></u-icon>
									</view>
								</u-col>
							</u-row>
						</u-col>
					</u-row>
					<u-row>
						<u-col span='9'>
							<u-row>
								<u-col span='4'>
									<view class='btn' @click='add(4)'>4</view>
								</u-col>
								<u-col span='4'>
									<view class='btn' @click='add(5)'>5</view>
								</u-col>
								<u-col span='4'>
									<view class='btn' @click='add(6)'>6</view>
								</u-col>
							</u-row>
							<u-row>
								<u-col span='4'>
									<view class='btn' @click='add(7)'>7</view>
								</u-col>
								<u-col span='4'>
									<view class='btn' @click='add(8)'>8</view>
								</u-col>
								<u-col span='4'>
									<view class='btn' @click='add(9)'>9</view>
								</u-col>
							</u-row>
							<u-row>
								<u-col span='8'>
									<view class='btn' @click='add(0)'>0</view>
								</u-col>
								<u-col span='4'>
									<view class='btn' @click='add(".")'>.</view>
								</u-col>
							</u-row>
						</u-col>
						<u-col span='3'>
							<view class='wechat-pay-btn' @click='transaction'>
								<u-icon name="rmb-circle-fill" label='转账' labelSize='18px' labelColor="#fff" labelPos='bottom' color='#fff' size='48'></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 0,
				toUser: 0,
				phone: '',
				amount: '',
				storeLogo: 'https://picture.jmgc.vip/907f5016-2b84-4177-b686-f3fea4be14d9.png',
				backgroundImage: 'https://picture.jmgc.vip/77008014-b99a-4aa4-b67a-580dc8f937b3.png',
			}
		},
		onLoad(options) {
			if(typeof(options.scene) != 'undefined'){
				let token = uni.getStorageSync('api_token')
				if(token == ''){
					uni.showModal({
						title: '',
						content: '请先登录系统，再扫码转账',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/index/login'
							})
						}
					})
				}else{
					this.toUser = options.scene
					this.request.get(`public/users/${this.toUser}`).then((res) => {
						console.log('user',res.data)
						if(res.data.huifuAccount != null){
							this.phone = `${res.data.huifuAccount.cardInfo.card_name}(${res.data.username})`
						}else{
							this.phone = res.data.username
						}
						this.getBalance()
					})
				}
			}else{
				uni.showModal({
					title: '',
					content: '获取目标钱包信息失败,请重新扫码！',
					showCancel: false,
					success: () => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
		onShow() {
			// 获取自己的余额
		},
		methods: {
			getBalance(){
				this.request.get(`api/balances`).then((res) => {
					console.log('balance', res.data)
					this.balance = res.data.amount
				})
			},
			add(num) {
				let amount = 0
				// 判断是否.
				this.amount = this.amount + ''
				if(num == '.'){
					console.log('点击了。')
					if(this.amount == ''){
						this.amount = '0.'
					}else{
						
						if(this.amount.indexOf('.') == -1){
							this.amount += '.'
						}
					}
				}else{
					if(this.amount.indexOf('.') == -1){
						this.amount += `${num}`
					}else{
						let amountArr = this.amount.split('.')
						console.log(amountArr)
						if(amountArr[1] == ''){
							this.amount += `${num}`
						}else{
							if(amountArr[1].length < 2){
								this.amount += `${num}`
							}
						}
					}
				}
			},
			pev() {
				let amount = this.amount + ''
				amount = amount.slice(0,-1)
				// amount = Math.floor(amount / 10)
				// console.log(amount)
				this.amount = amount
			},
			transaction(){
				console.log(this.amount,this.balance)
				if(parseFloat(this.amount) > parseFloat(this.balance)){
					uni.showModal({
						title: '',
						content: '超出最大可转账额度！',
						showCancel: false,
						success: () => {
							
						}
					})
					return
				}
				let sendData = [{
					to: this.toUser,
					amount: this.amount,
					type: 'transfer',
					comment: '手动转账'
				}]
				uni.showModal({
					title: '请注意',
					content: '一经转账，将不能撤回，是否确定转账？',
					success: (data) => {
						if(data.confirm){
							uni.showLoading()
							this.request.post(`api/transactions/send`, sendData)
								.then((res) => {
									uni.hideLoading()
									uni.showModal({
										title: '',
										content: '执行成功',
										showCancel: false,
										success: () => {
											this.getBalance()
										}
									})
								}).catch((err) => {
									uni.hideLoading()
									console.error(err)
									this.getBalance()
								})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: #e9eae9;
		text-align: center;
		padding: 5px 0px;
	}

	.group {
		margin: 10px;
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
	}

	.title {
		color: #909399;
		font-size: 14px;
		line-height: 32px;
	}

	.name {
		font-size: 14px;
		float: right;
		padding-right: 10px;
		line-height: 32px;
		color: #303133;
	}

	.div1 {
		// background-color: #040313;
		// margin: 10px;
		text-align: center;
		// padding: 10px;
		// border-radius: 10px;
		padding:10px;
	}

	.label {
		color: white;
		font-size: 14px;
		text-align: center;
	}

	.amount {
		color: #f56c6c;
		text-align: center;
	}

	.amount-detail {
		font-size: 35px;
		font-weight: bold;
	}

	.btn {
		padding: 10px 0px;
		margin:5px;
		border-radius: 5px;
		text-align: center;
		background-color: #fff;
		color: #303133;
		font-size: 20px;
		font-weight: bold;
		border: solid #f3f3f3 1px;
	}
	
	.btn2 {
		margin:5px 5px 0px 5px;
		padding:5px 0px;
		border-radius: 5px;
		text-align: center;
		background-color: #fff;
		color: #303133;
		font-size: 18px;
		font-weight: bold;
		border: solid #f3f3f3 1px;
	}

	.pay-btn {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #19be6b;
		color: #fff;
		font-size: 20px;
		border: solid #f3f3f3 1px;
	}
	
	
	.group {
		margin: 10px;
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
	}
	
	.group-active {
		margin: 10px;
		background-color: #f3f3f3;
		border-radius: 10px;
		border: solid #19be6b 2px;
	}
	
	.wechat-pay-btn{
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #19be6b;
		color: #fff;
		font-size: 20px;
		height:20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.ali-pay-btn{
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #2979ff;
		color: #fff;
		font-size: 20px;
		height:20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>